<template>
	<view class="poster_pages">
		<!-- <image class="poster_background_imgs" :src="picUrl+zhinfo.share_poster" mode="aspectFill"></image> -->
		<view class="poster_img_box">
			<image @load="loadImg" class="poster_img" :src="picUrl+zhinfo.share_poster" mode="widthFix"></image>
			<view v-if="showBkColor" class="poster_btn_box">
				<view class="poster_upload_btn" @click="uploadPoster">
					<image class="active_download_icon" :src="onlinePic+'fansmeeting/active_download_icon.png'">
					</image>下载海报
				</view>
				<view class="poster_shae_btn" @click="openPopup">
					<image class="active_share_icon" :src="onlinePic+'fansmeeting/active_share_icon.png'"></image>分享好友
				</view>
			</view>
		</view>

		<view class="fansmeeting_share_box" v-if="showShareTimeImg">
			<image style="width: 100%;" :src="onlinePic+'fansmeeting/fansmeeting_share_zh.jpg'" mode="widthFix"></image>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)" :is-mask-click="true" :safe-area="false">
			<view class="active_share_bottom_popup">
				<view class="share_bottom_title">分享</view>
				<view class="share_bottom_close_popup" @click="colsePopup">
					<uni-icons type="closeempty" color="#AAAAAA" size="22"></uni-icons>
				</view>
				<view class="share_btn_box">
					<view class="text-c" @click="uploadPoster">
						<image class="share_btn_icon" :src="onlinePic+'wechat_circle.png'"></image>
						<view class="c-666666 f-12 mt-10">朋友圈</view>
					</view>
					<view class="text-c">
						<button open-type="share" class="share_btn">
							<image class="share_btn_icon" :src="onlinePic+'wechat.png'"></image>
							<view class="c-666666 f-12 mt-10">微信好友</view>
						</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getZHActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				img: '',
				zhinfo: '',
				huodong_id: '',
				huodong_club_id: '',
				channel: '',
				showBkColor: false,
				showShareTimeImg: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.getZHActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			uni.showLoading({})
			if (uni.getStorageSync('Appoptions').scene == 1154) {
				this.showShareTimeImg = true
				uni.hideLoading()
			} else {
				this.showShareTimeImg = false
			}
			this.huodong_id = options.huodong_id ? options.huodong_id : ''
			this.huodong_club_id = options.club_id ? options.club_id : ''
			this.channel = options.channel ? options.channel : ''
			if (uni.getStorageSync('access_token')) {
				this.getZHActiveInfo()
			}

			var params = {
				event_code: '活动分享页',
				path: 'pages/group/groupactiveshare',
				event_id: this.huodong_id,
				title: '',
				source_page: '',
				value: uni.getStorageSync('Appoptions').query ? uni
					.getStorageSync('Appoptions').query.register_channel : '',
			}
			app.BurialPoint(params)

		},
		methods: {
			openPopup() {
				this.$refs.popup.open()
			},
			colsePopup() {
				this.$refs.popup.close()
			},
			getZHActiveInfo() {
				getZHActiveInfo({
					huodong_id: this.huodong_id,
					channel: this.channel ? this.channel : ''
				}).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.zhinfo = res.data.info
						if (!res.data.info.huodong_join_id) {
							uni.reLaunch({
								url: '/pages/group/groupactiveinfo?huodong_id=' + this.huodong_id +
									'&channel=' + this.channel
							})
						} else {
							this.img = res.data.info.share_poster
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			uploadPoster() {
				var that = this
				uni.downloadFile({
					url: that.picUrl + that.zhinfo.share_poster,
					success: function(res) {
						var tempFilePath = res.tempFilePath
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								uni.saveImageToPhotosAlbum({
									filePath: tempFilePath,
									success: function() {
										app.getShareTask()
										uni.showToast({
											title: '保存成功了，快去分享吧~',
											icon: 'none',
											duration: 1500
										});

										that.$refs.popup.close()
										var params = {
											event_code: '活动分享页',
											path: 'pages/group/groupactiveshare',
											event_id: that.huodong_id,
											title: '',
											source_page: '活动分享页-下载海报',
											value: that.channel ? that.channel : '',
										}
										app.BurialPoint(params)
									},
									fail(e) {
										console.log('下载失败')
									}
								});
							},
							fail() {
								console.log('未授权')
							}
						})

					},
				})
			},
			loadImg() {
				this.showBkColor = true
			},
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.zhinfo.share_poster_title,
				path: this.zhinfo.share_poster_url,
				imageUrl: this.zhinfo.share_poster_pic ? this.picUrl + this.zhinfo.share_poster_pic : ''
			}
		},
		onShareTimeline: function() {
			app.getShareTask()
			return {
				title: this.zhinfo.share_poster_title,
				query: 'huodong_id=' + this.huodong_id + '&club_id=' + this
					.huodong_club_id + '&channel=' + this.channel + '&invitation_id=' + uni.getStorageSync(
						'userinfo') ? uni.getStorageSync('userinfo').user_id : '',
				imageUrl: this.zhinfo.share_poster_pic ? this.picUrl + this.zhinfo.share_poster_pic : ''
			}
		},
	}
</script>

<style lang="scss">
	.poster_pages {
		height: 100vh;
		position: relative;

		.poster_img_box {
			position: relative;
			text-align: center;
		}

		.poster_img {
			width: 84%;
			vertical-align: middle;
		}

		.poster_btn_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 11%;

			.poster_upload_btn {
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 268rpx;
				color: #ffffff;
				padding: 30rpx 0;
				border-radius: 8rpx;
				background-color: #00A0DC;
			}

			.poster_shae_btn {
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 268rpx;
				color: #ffffff;
				padding: 30rpx 0;
				border-radius: 8rpx;
				background-color: #28C445;
			}

			button {
				line-height: normal;
			}

			.active_share_icon {
				width: 22rpx;
				height: 21rpx;
				margin-right: 13rpx;
				vertical-align: middle;
			}

			.active_download_icon {
				width: 22rpx;
				height: 22rpx;
				margin-right: 13rpx;
				vertical-align: middle;
			}
		}

		.active_share_bottom_popup {
			width: 100%;
			height: 500rpx;

			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #ffffff;

			.share_bottom_title {
				position: relative;
				text-align: center;
				padding: 40rpx;
				border-bottom: 1rpx solid #E9E9E9;
			}

			.share_bottom_close_popup {
				padding: 40rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
			}

			.share_btn_box {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 90rpx;

				.share_btn_icon {
					width: 97rpx;
					height: 97rpx;
				}

				.share_btn {
					line-height: normal;
					background-color: transparent;
					box-sizing: content-box;
					padding-left: 0 !important;
					padding-right: 0 !important;
				}

				button {
					line-height: normal !important;
				}

				button::after {
					border: none !important;
				}
			}


		}

	}
</style>